<template>
  <div id="pay" >
      <div class="flow">
          <ul>
              <li><div class="flow_li" :class="{select:is_select[0]}">填写个人信息</div></li>
              <li class="img"><img :src="arror[0]" alt=""></li>
              <li><div class="flow_li" :class="{select:is_select[1]}">确认支付</div></li>
              <li class="img"><img :src="arror[1]" alt=""></li>
              <li><div class="flow_li" :class="{select:is_select[2]}">支付完成</div></li>
          </ul>
      </div>
      <div>
          <div style="clear:left;"></div>
          <div class="order_info">
              <p class="confirm">支付完成</p>
              <div class="food_info">
                  <table>
                      <tr>
                          <td width="1000px"><span class="pay_success">支付完成，请等待发货</span></td>
                      </tr>

                  </table>
              </div>
          </div> 
 
        </div>
   </div>

</template>

<script>

export default {
  data () { 
    return {
      is_select:[true,true,true],
      arror:['./static/img/arror_success.png','./static/img/arror_success.png'],
    }
  },
  created:function(){

      var ordername=this.$cookie.get('ordername');
      if(ordername == ''){
          window.location.href="./";
          return;
      }
      this.$cookie.delete('ordername');
  },
  components: {

  },
  computed:{

  },
   filters: {
    },
  methods: {
  }
}
</script>

<style scoped>
i{
  color:#cc0000;
  font-size: 20px;
}
#pay{
  width:1000px;
  margin:0 auto;
}

.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
#pay .flow{
  width: 100%;
  margin-top:15px;
  padding:20px 20%;
}
.flow ul li{
  float: left;
  margin-right: 1.2%;
}
.flow ul li .flow_li{
  width: 120px;
  height: 80px;
  background-color: #FF6838;
  color:#fff;
  border-radius: 50%;
  text-align: center;
  font:14px/80px '微软雅黑';
}
.flow ul li .select{
  background-color: #5FB878;
}
.flow ul .img{
  width: 90px;
}
.flow ul .img img{
  width: 100%;
  margin-top:20px;
}
.confirm{
  width: 96%;
  padding-left:1%;
  font:bold 15px/25px '微软雅黑';
  color:#333;
  margin-bottom: 15px;
}
.order_info .food_info{
  margin-top: 10px;
  width: 100%;
  border-bottom: 1px dashed #ccc;
}
.order_info .food_info table .thead th{
  height: 25px;
  font:15px/25px '微软雅黑';
  color:#333;
  border-bottom:3px solid #B2D1FF;
}
.order_info .food_info table tr td{
  padding:10px;
  font:14px/20px '微软雅黑';
  color:#333;
  text-align: center;
  background-color: rgba(255,255,255,0.5);
}
.order_info .food_info table tr td .pay_success{
  text-align: center;
  line-height: 50px;
}
.qrcode{
  width: 100%;

}
.qrcode p{
  text-align: center;
}

</style>
